<template>
	<view class="bg-white" :style="button?'box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);':''">
		<!-- 标题 -->
		<view class="flexz">
			<view class="flex_l">
				<view v-if="type==1" class="size-30 bg-blue white ptb-18 plr-28">{{item.type==1?'即时单':'预约单'}}</view>
				<view v-if="type==2" class="size-30 bg-blue white ptb-18 plr-28">
					{{item.type==1?'即时单-':'预约单-'}}{{item.status==5?'已接单':'行程中'}}</view>
				<view v-if="type==3" class="size-30 bg-blue white ptb-18 plr-28">
					{{item.type==1?'即时单-':'预约单-'}}{{item.status==3?'待支付':'已完成'}}</view>
				<view class="ml-20" v-if="type!=3&&item.type==1">立即出发</view>
				<view class="ml-20 size-28" v-if="type!=3&&item.type==2">{{ item.appointment_time | formatDate }} 出发
				</view>
				<view class="ml-20 red" v-if="type==3&&item.platform_service_fee">服务费：￥{{item.platform_service_fee}}
				</view>
			</view>
			<view class="red bold mr-36">￥{{item.estimated_price}}</view>
		</view>
		<!-- 起始点 -->
		<view class="ptb-35 pl-40 pr-28">
			<view class="flexz flex-top">
				<view class="flex_l u-flex-1 over-hidden">
					<view class="flexz flex-column">
						<view class="bg-purple radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">起点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flexz">
							<view class="bold u-flex-1">{{item.start}}</view>
							<view v-if="type==2&&item.order_money!=0" class="red"></view>

						</view>
						<view class="u-line-1 size-28 mt-12">{{item.start_address}}</view>
					</view>
				</view>
			</view>

			<!--			<view v-if="type==1||type==3" class="w100 flex_r" style="height: 30rpx;">-->
			<!--			</view>-->
			<!--			<view v-if="type==2" class="flex_r" style="height: 46rpx;" >-->
			<!--				<view class="flex1 flex-middle" @click.stop="call(item.tel)">-->
			<!--					<view class="mr-10">尾号{{item.newtel}}</view>-->
			<!--					<u-icon name="phone-fill" color="#EA0000" size="30"></u-icon>-->
			<!--				</view>-->
			<!--			</view>-->

			<view class="flexz flex-bottom">
				<view class="flex_l u-flex-1 over-hidden">
					<view class="flexz flex-column">
						<view class="bg-red radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">终点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flexz">
							<view class="bold u-flex-1">{{item.end}}</view>
						</view>
						<view class="u-line-1 size-28 mt-12">{{item.end_address}}</view>
					</view>
				</view>
			</view>

			<view class="t-item" v-if="item.equipmentList.length > 0">
				<text class="name-list" v-for="(data,k) in item.equipmentList"
					:key="k">{{data.sfequipment.name}}({{data.num}})</text>
			</view>

			<!-- <view v-if="item.order_type==2" class="mt-20 blue">时间：{{item.start_time}}</view> -->
		</view>
		<!-- 按钮
		<!-- -1=已取消,1=待接单,2=待确认,3=待出发,4=行驶中,5=已完成 -->
		<view class="flexz size-32 bold white w100" style="height: 132rpx;" v-if="type!=3&&button">
			<!--			<view v-if="type==1" @click="clickButton(item.id)" class="u-flex-1 bg-blue center h100">接单</view>-->
			<view class="flexz w100 h100">
				<view class="lefts center h100">
					<view class="call" @click="call(item.mobile)">
						<image src="/static/img/call.png" mode="widthFix"></image>
						<text>打电话</text>
					</view>

					<!-- <view class="call" @click="add(item)">
						<image src="/static/img/sf-pub.png" mode="widthFix"></image>
						<text>添加设备</text>
					</view> -->

				</view>


				<!-- <view v-if="item.status==1||item.status==2" class="u-flex-1 bg-blue center h100" @click="clickButton(item.id,item.status)">查看详情</view>
				<view v-if="item.status==3" class="u-flex-1 bg-blue center h100" @click="go(item.id)">开始出发</view>
				<view v-if="item.status==4" class="u-flex-1 bg-blue center h100" @click="over(item.id)">结束行程</view> -->
				<view @click="clickButton(item.id,item.status)" class="u-flex-1 bg-blue center h100">
					{{type==1?'抢单':item.status==5?'开始出发':'查看详情'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number, // 1 首页  2 订单  3 我的订单
			},
			item: {
				type: Object
			},
			button: { //订单详情  false
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},

		methods: {
			add(item) {
				uni.navigateTo({
					url: `/pages/driver/my/equipment/equipment?type=${item.type}&order_id=${item.id}`
				})
			},
			clickButton(id, status) {
				console.log('1111', this.type == 1);
				if (this.type == 1) {
					//首页抢单
					this.$http('/addons/ddrive/order/taking', {
						order_id: id
					}, "POST").then(() => {
						// uni.showToast({
						// 	title: '抢单成功'
						// })
						setTimeout(() => {
							this.toDetail(id)
						}, 200)
					})
				} else if (this.type == 2) {
					if (status == 5) {
						//订单——已接单——开始出发
						this.$http('/addons/ddrive/order/set_out', {
							order_id: id
						}, "POST").then(() => {
							setTimeout(() => {
								this.toDetail(id)
							}, 200)
						})
					} else {
						//订单——查看详情
						this.toDetail(id)
					}
				}
			},
			toDetail(id) {
				uni.navigateTo({
					// url: '/pages/shunfeng/order-detail?id=' + id
					url: '/pages/driver/home/detail?id=' + id
				})
			},
			//首页抢单
			// clickButton(id) {
			// 	this.$http('/addons/ddrive/order/info', {
			// 		order_id: id
			// 	}, "POST").then(() => {
			// 		uni.showToast({
			// 			title: '抢单成功'
			// 		})
			// 		setTimeout(() => {
			// 			this.toDetail(id)
			// 		}, 300)
			// 	})
			// },
			// 立即出发
			go(id) {
				this.$http('/addons/ddrive/sforder/set_out', {
					order_id: id
				}, "POST").then(() => {
					this.toDetail(id)
				}).catch(() => {
					this.$emit('update')
				})
			},
			// 结束行程
			over(id) {
				this.$http('/addons/ddrive/sforder/order_complete', {
					order_id: id
				}, "POST").then(() => {
					this.toDetail(id)
				}).catch(() => {
					setTimeout(() => {
						this.toDetail(id)
					}, 1000)
				})
			},
			//打电话
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss">
	.lefts {
		// width: 36%;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #DFDFDF;

		.call {
			padding: 0 30rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #120062;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 66rpx;
				margin-bottom: 6rpx;
			}
		}
	}

	.t-item {
		margin-top: 20rpx;

		text {
			display: inline-block;
			background-color: rgb(225, 231, 252);
			margin: 10rpx 20rpx 0 0;
			padding: 10rpx 20rpx;
			border-radius: 50rpx;
			font-size: 26rpx;
			color: #000000;
		}
	}
</style>